<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>药品管理系统 - 登录</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <style>
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
        }
    </style>
</head>
<body>
<!--背景特效-开始-->
<div id="particles-js"></div>
<script>
    // 粒子系统实现
    document.addEventListener('DOMContentLoaded', () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        document.getElementById('particles-js').appendChild(canvas);

        // 设置Canvas尺寸
        function setCanvasSize() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }

        setCanvasSize();
        window.addEventListener('resize', setCanvasSize);

        // 粒子类
        class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.vx = (Math.random() - 0.5) * 1.2; // 稍快的速度
                this.vy = (Math.random() - 0.5) * 1.2; // 稍快的速度
                this.radius = Math.random() * 3 + 1.5; // 更大的粒子
                this.color = this.getRandomColor();
            }

            getRandomColor() {
                const colors = [
                    'rgba(22, 93, 255, 0.9)', // 更高的不透明度
                    'rgba(0, 207, 253, 0.9)', // 更高的不透明度
                    'rgba(114, 46, 209, 0.9)'  // 更高的不透明度
                ];
                return colors[Math.floor(Math.random() * colors.length)];
            }

            update() {
                this.x += this.vx;
                this.y += this.vy;

                // 边界检测
                if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
                if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            }
        }

        // 创建粒子数组 (增加粒子数量)
        const particles = [];
        const particleCount = Math.min(150, Math.floor(canvas.width * canvas.height / 8000)); // 更多粒子

        for (let i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }

        // 鼠标交互
        const mouse = {x: null, y: null, radius: 120}; // 更大的交互范围

        window.addEventListener('mousemove', (e) => {
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        });

        // 动画循环
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 绘制渐变背景 (更浅的色调)
            const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
            gradient.addColorStop(0, '#60a5fa'); // 浅蓝色
            gradient.addColorStop(1, '#93c5fd'); // 更浅的蓝色
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 更新并绘制所有粒子
            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();

                // 计算与鼠标的距离
                const dx = mouse.x - particles[i].x;
                const dy = mouse.y - particles[i].y;
                const distance = Math.sqrt(dx * dx + dy * dy);

                // 鼠标与粒子的交互 (更强的吸引力)
                if (distance < mouse.radius) {
                    particles[i].x += dx * 0.008; // 更强的吸引力
                    particles[i].y += dy * 0.008; // 更强的吸引力
                }

                // 粒子之间连线 (增强连线效果)
                for (let j = i; j < particles.length; j++) {
                    const dx2 = particles[j].x - particles[i].x;
                    const dy2 = particles[j].y - particles[i].y;
                    const distance2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);

                    if (distance2 < 120) { // 更长的连线距离
                        ctx.beginPath();
                        ctx.strokeStyle = `rgba(255, 255, 255, ${0.2 - distance2 / 1000})`; // 更高的不透明度
                        ctx.lineWidth = 0.8; // 更粗的连线
                        ctx.moveTo(particles[i].x, particles[i].y);
                        ctx.lineTo(particles[j].x, particles[j].y);
                        ctx.stroke();
                        ctx.closePath();
                    }
                }
            }

            requestAnimationFrame(animate);
        }

        animate();
    });
</script>
<!--背景特效-结束-->

<form class="layui-form">
    <div style="width: 320px; margin: 15% auto 0;">
        <h1 style="font-size: 50px; margin-bottom: 20px; color: white; text-align: center; letter-spacing: 5px;">药品管理系统</h1>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-email"></i>
                </div>
                <input type="email" name="email" lay-verify="required|email" placeholder="邮箱" lay-reqtext="请输入邮箱" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="password" lay-verify="required" placeholder="密   码" lay-reqtext="请输入密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-vercode"></i>
                        </div>
                        <input type="text" name="captcha" id="captcha" lay-verify="required" placeholder="验证码" lay-reqtext="请输入验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div style="margin-left: 10px;">
                        <canvas id="canvas" width="122" height="36" style="display: inline-block;border-radius: 2px;cursor: pointer;background-color: white;border: 1px solid #e2e2e2;"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登 录</button>
        </div>
        <div class="layui-form-item">
            <a href="/toUserEnroll" style="float: left; margin-top: 7px; margin-left: 5px; color: white;">注册帐号</a>
            <a href="#" style="float: right; margin-top: 7px; margin-right: 5px; color: white;">忘记密码</a>
        </div>
    </div>
</form>

<script src="/layui/layui.js"></script>
<script>
    // 如果当前窗口是iframe，则强制在顶级窗口中打开目标URL
    if (window.top !== window.self) {
        window.top.location.href = window.self.location.href;
    }

    <!--自定义验证码生成模块-->
    layui.define(function (e) {
        let a = layui.jquery;
        let obj = {
            randomColor: function () {  //得到随机的颜色值
                let r = Math.floor(Math.random() * 256);
                let g = Math.floor(Math.random() * 256);
                let b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            },
            draw: function (show_num) {
                let canvas_width = a('#canvas').width();
                let canvas_height = a('#canvas').height();
                let canvas = document.getElementById("canvas"); //获取到canvas的对象，演员
                let context = canvas.getContext("2d");  //获取到canvas画图的环境，演员表演的舞台
                canvas.width = canvas_width;
                canvas.height = canvas_height;
                let sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
                let aCode = sCode.split(",");
                let aLength = aCode.length; //获取到数组的长度

                for (let i = 0; i <= 3; i++) {
                    let j = Math.floor(Math.random() * aLength);    //获取到随机的索引值
                    let deg = Math.random() * 30 * Math.PI / 180;   //产生0~30之间的随机弧度
                    let txt = aCode[j]; //得到随机的一个内容
                    show_num[i] = txt.toLowerCase();
                    let x = 20 + i * 20;    //文字在canvas上的x坐标
                    let y = 20 + Math.random() * 8; //文字在canvas上的y坐标
                    context.font = "bold 25px 微软雅黑";
                    context.translate(x, y);
                    context.rotate(deg);
                    context.fillStyle = obj.randomColor();
                    context.fillText(txt, 0, 0);
                    context.rotate(-deg);
                    context.translate(-x, -y);
                }
                for (let i = 0; i <= 5; i++) { //验证码上显示线条
                    context.strokeStyle = obj.randomColor();
                    context.beginPath();
                    context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                    context.stroke();
                }
                for (let i = 0; i <= 30; i++) { //验证码上显示小点
                    context.strokeStyle = obj.randomColor();
                    context.beginPath();
                    let x = Math.random() * canvas_width;
                    let y = Math.random() * canvas_height;
                    context.moveTo(x, y);
                    context.lineTo(x + 1, y + 1);
                    context.stroke();
                }
            },
        };
        e("captcha", obj);
    });

    layui.use(['form', 'layer', 'captcha', 'jquery'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let captcha = layui.captcha;
        let $ = layui.jquery;

        let show_num = [];
        captcha.draw(show_num);
        //显示验证码
        $("#canvas").on('click', function () {
            captcha.draw(show_num);
        });

        // 自动填充验证码
        $('#captcha').val(show_num.join(""));

        // 表单提交事件
        form.on('submit(demo-login)', function (data) {
            let field = data.field; // 获取表单字段值

            let code = field["captcha"];
            if (show_num.join("") !== code.toLowerCase()) {
                layer.msg('验证码错误,请重新输入！', {icon: 2});
                return false;
            }

            $.ajax({
                url: '/doUserLogin',
                type: 'POST',
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                data: {
                    "email": field.email,
                    "password": field.password
                },
                success: function (res) {
                    switch (res.code) {
                        case 0:
                            layer.msg(res.info, {icon: 0});
                            captcha.draw(show_num); // 生成新的验证码
                            break;
                        case 1:
                            layer.msg(res.info, {icon: 1});

                            // 将药品信息字典存入Redis中
                            $.get('/doRedisMedicine', function (data) {
                                // console.log(data);
                            }).fail(function () {
                                layer.msg('Redis存储药品字典失败', {icon: 4});
                            });

                            setTimeout(function () {
                                window.location = '/';
                            }, 2000);
                            break;
                        case 2:
                            layer.msg(res.info, {icon: 2});
                            captcha.draw(show_num); // 生成新的验证码
                            break;
                        case 3:
                            layer.msg(res.info, {icon: 5});
                            setTimeout(function () {
                                window.location = '/toNoticeDisabled';
                            }, 2000);
                            break;
                    }
                },
                error: function () {
                    layer.msg('Ajax请求异常！', {icon: 0});
                }
            });
            return false; // 阻止默认 form 跳转
        });
    });
</script>
</body>
</html>